<template>
  <div class="fileStyle">
    <el-upload
      class="upload-demo"
      :limit="10"
      :on-exceed="handleExceed"
      action="/api/oss/uploadOSS"
      :on-success="handle_success"
      accept=".doc, .txt, .pdf, .jpg, .png, .docx, .xlsx"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :before-upload="beforeAvatarUpload"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">{{$t('message.scfj')}}</el-button>
      <span slot="tip" class="el-upload__tip">{{$t('message.file')}}</span>
    </el-upload>
  </div>
</template>

<script>
import envCfg from "../../assets/js/env.js";
export default {
  data() {
    return {
      fileLists: [],
      fileList: []
    };
  },
  props: {
    pfileList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  mounted() {
  	if (this.pfileList.length !== 0) {
		this.pfileList.forEach(item => {
  	    this.fileList.push({
  	      name: item.originalFileName,
  	      response: { data: [item] }
  	    });
  	  });
  	}
  },
  watch: {
    pfileList: function(val) {
      if (val.length !== 0) {
        val.forEach(item => {
          this.fileList.push({
            name: item.originalFileName,
            response: { data: [item] }
          });
        });
      }
    }
  },
  methods: {
    handle_success(res, file, fileList) {
      console.log(file);
      if (res.code == 200) {
        this.$message.success(this.$t("message.cfile"));
		res.data[0].externalLink = "/api/oss/downloadOSS?fileName="+res.data[0].fileName
        this.fileLists.push(res.data[0]);
      } else if(res.code == 504){
		this.$message.error(this.$t("message.chaoshi"));  
	  }else {
        this.$message.error(this.$t("message.efile"));
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(this.$t("message.nfile"));
    },
    handlePreview(file) {
      window.open(
        "/api/oss/downloadOSS?fileName=" +encodeURIComponent(file.response.data[0].fileName))
    },
    handleRemove(file, fileList) {
      let fileName = file.response.data[0].fileName;
      this.$axios
        .get("/api/oss/deleteOSS", {
          params: {
            fileName: fileName
          }
        })
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success(this.$t("message.sccg"));
            this.fileLists = [];
            fileList.forEach(item => {
              this.fileLists.push(item.response.data[0]);
            });
            // console.log(this.fileLists)
          } else {
            this.$message.error(this.$t("message.scsb"));
          }
        });
    },
    handleChange(file, fileList) {},
    beforeAvatarUpload(file) {
      let isExt = false;
      let FileExt = file.name.replace(/.+\./, "");
      if (
        ["jpg", "png", "txt", "pdf", "doc", "docx", "xlsx"].indexOf(
          FileExt.toLowerCase()
        ) === -1
      ) {
        this.$message({
          type: "warning",
          message: this.$t("message.tfile")
        });
      } else {
        isExt = true;
      }
      const isLt = file.size / 1024 < 10000;
      if (!isLt) {
        this.$message.error(this.$t("message.sfile"));
      }
      return isLt && isExt;
    }
  }
};
</script>

<style lang="scss" scoped>
.fileStyle {
  /* border: 1px solid #67C23A; */
  /* margin-bottom: 20px; */
}
.el-upload-list {
  width: 425px !important;
}
.el-upload__tip {
  color: #999999;
  font-size: 12px;
  margin-left: 12px;
}
.fileStyle {
  ::v-deep .el-upload-list {
    width: 425px !important;
  }
}
</style>
